<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- v-for -->
        <table border = "1 solid" colspa = "0" cellspacing = "0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for = "(article, index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.catagory}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>

        <!-- v-bind -->
        </table>
        <a v-bind:href="url">百度一下</a>
        <a :href="url">百度一下</a>

        <!-- v-if -->
        <div>手链价格为： <span v-if = "customer.level > 0 && customer.level <= 1">9.9</span>
                        <span v-else-if = "customer.level > 1 && customer.level <= 3">19.9</span>
                        <span v-else>29.9</span>
        </div>
        <!-- v-show -->
        <div>手链价格为： <span v-show = "customer.level > 0 && customer.level <= 1">9.9</span>
                        <span v-show = "customer.level > 1 && customer.level <= 3">19.9</span>
                        <span v-show = "customer.level > 3">29.9</span>
        </div>

    </div>

    <script type="module">
        import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        createApp({
            data() {
                return {
                    articleList:[{
                        title:"title1",
                        catagory:"时事",
                        time: "2023-08-05",
                        state: "已发布"
                    },{
                        title:"title2",
                        catagory:"体育",
                        time: "2023-09-05",
                        state: "草稿"
                    },{
                        title:"title3",
                        catagory:"旅游",
                        time: "2023-09-05",
                        state: "已发布"
                    }],
                    url: "https://www.baidu.com",
                    customer:{
                        name: '张三',
                        level:6
                    }
                }
            }
        }).mount('#app');
    </script>
   
</body>
</html>